<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        body,html{
            height: 100%;
            width: 100%;
        }
        #app{
            background: #333;
            height: 100%;
            width: 100%;
        }
        .puke-tips {
            text-align: center;
            font-size: 18px;
            color: #fff;
            padding-top: 30px;
        }

        .puke {
            width: 400px;
            margin: 20px auto;
            transition: transform 1s;
            transform-origin: center center 0;
        }

        .puke li {
            float: left;
            width: 100px;
            box-sizing: border-box;
            height: 100px;
            line-height: 100px;
            position: relative;
        }

        .puke li div {
            transition: transform 0.4s;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: url("test.jpg") no-repeat;
            color: #58B7FF;
            border: 1px solid #ccc;
            font-size: 40px;
            text-align: center;
        }

        .puke li.pukeBg {
            cursor: pointer;
        }
        .puke li .po1{
            background-position: 0 0;
        }
        .puke li .po2{
            background-position: -100px 0;
        }
        .puke li .po3{
            background-position: -200px 0;
        }
        .puke li .po4{
            background-position: -300px 0;
        }
        .puke li .po5{
            background-position: 0 -100px;
        }
        .puke li .po6{
            background-position: -100px -100px;
        }
        .puke li .po7{
            background-position: -200px -100px;
        }
        .puke li .po8{
            background-position: -300px -100px;
        }

        .puke li.pukeBg div {
            background: url("") no-repeat center, #fff;
        }

        .puke li.pukeBg div:first-child {
            z-index: 1;
            transform: rotateY(0deg);
        }

        .puke li.pukeBg div:last-child {
            transform: rotateY(180deg);
        }

        .puke li.pukeNum div:first-child {
            transform: rotateY(180deg);
        }

        .puke li.pukeNum div:last-child {
            z-index: 1;
            transform: rotateY(0deg);
        }

        /*# sourceMappingURL=../../maps/vue-demos/poker/poker.css.map */

    </style>
</head>
<body>
<div id="app">
    <p class="puke-tips">记住牌子，在90秒时间内找出相同的牌子<span v-show="nowTime>0" class="ml30">记忆倒计时：{{nowTime}}</span><span v-show="endTime>0&&nowTime<=0" class="ml30">倒计时：{{endTime}}</span><span v-show="endTime<=0" class="ml30">游戏失败</span></p>
    <div class="puke clearfix" :style="{'transform':'rotate( '+pukeRotate+'deg)'}">
        <ul>
            <li v-for="item,index in puke" @click="pukeDo(item,index)" :class="[isStart||pukeNowIndex===index||pukeErrorIndex===index||checkEnd.indexOf(item.number)!==-1?'pukeNum':'pukeBg']"  :style="{'transform':'rotate( -'+pukeRotate+'deg)'}">
                <div class="zero"></div>
                <!--<div class="num" :class="{'po'+item.number}"></div>-->
                <div class="num" :class="'po'+item.number"></div>
            </li>
        </ul>

    </div>
</div>
</body>
<script src="../vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            //翻牌数组
            puke:[],
            //第一次翻牌的号码
            firstNumber:0,
            pukeNowIndex:-1,
            pukeErrorIndex:-1,
            //已经翻牌的号码
            checkEnd:[],
            //旋转角度
            pukeRotate:0,
            isStart:true,
            nowTime:15,
            endTime:90,
            pukeTimer:null,
            endTimer:null
        },
        methods:{
            /**
             * @description 初始化翻牌
             */
            initPuke(){
                this.pukeShow=!this.pukeShow;
                if(this.pukeShow){
                    this.isStart=true;
                    this.nowTime=15;
                    this.endTime=90;
                    this.checkEnd=[];
                    this.puke=[];
                    this.firstNumber=0;
                    this.pukeNowIndex=-1;
                    this.pukeErrorIndex=-1;
                    //准备翻牌数组
                    let pukeList=[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8],pukeText='';
                    for(let i=0;i<16;i++){
                        pukeText=pukeList.splice(Math.floor(Math.random() * pukeList.length),1)[0];
                        this.puke.push({
                            number:pukeText
                        })
                    }
                    //开始数据
                    this.pukeTimer=setInterval(()=>{
                            this.nowTime--;
                    if(this.nowTime<0){
                        clearInterval(this.pukeTimer);
                        this.isStart=false;
                        this.pukeIng();
                    }
                },1000)
                }
                else{
                    clearInterval(this.pukeTimer);
                    clearInterval(this.endTimer);
                }
            },
            /**
             * @description 翻牌倒计时
             */
            pukeIng(){
                this.endTimer=setInterval(()=>{
                    this.endTime--;
                    if(this.endTime<0){
                        clearInterval(this.endTimer);
                        clearInterval(this.pukeTimer);
                    }
                },1000);
            },
            /**
             * @description 翻牌操作
             * @param val 当前记录
             * @param i 当前记录索引
             */
            pukeDo(val,i){
                //号码是否已经有翻过的记录或者不在有效时间内翻牌
                if(this.isStart||this.endTime<0||this.pukeNowIndex===i||this.checkEnd.indexOf(val.number)!==-1){
                    return;
                }
                //是否是第一次翻牌
                if(this.firstNumber===0){
                    //记录第一次的翻牌信息
                    this.firstNumber=val.number;
                    this.pukeNowIndex=i;
                }
                else{
                    //与第一次是否一致
                    if(this.firstNumber===val.number){
                        this.checkEnd.push(val.number)
                        this.pukeErrorIndex=-1;
                        this.pukeNowIndex=-1;
                        //如果长度等于8就是全部已经翻完，游戏成功
                        if(this.checkEnd.length===8){
                            alert('游戏成功！');
                            clearInterval(this.endTimer);
                            clearInterval(this.pukeTimer);
                        }
                    }
                    else{
                        //翻牌错误，重置
                        this.pukeErrorIndex=i;
                        setTimeout(()=>{
                            this.pukeErrorIndex=-1;
                        this.pukeNowIndex=-1;
                        //进行旋转
                        this.pukeRotate+=90;
                    },400);
                    }
                    this.firstNumber=0;
                }
            }
        },
        mounted:function () {
            this.initPuke();
        }
    });
</script>
</html>